<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <div class="left_top_content">
          <h3>用户统计</h3>
        </div>
        <div class="right_top_content">
          <span>时间筛选：</span><el-date-picker v-model="time_value" type="month" placeholder="请选择年月" @change="change"
            value-format="YYYY-MM" format="YYYY-MM" />
        </div>
      </div>
      <div v-if="init_echart">
        <div class="top_echarts">

          <BottomEcharts id="bottom_echarts_one" :list="data_echarts" />
        </div>
        <div class="inquire">
          n = &nbsp;<div class="input"><el-input v-model="inquire_value" /></div>
          <div class="inquire_button">
            <el-button type="primary" @click="find_data">查询</el-button>
          </div>
        </div>
        <div class="top_table">
          <TopTable :list="list" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import Nav from "@/components/public/nav.vue"
import TopEcharts from "@/components/home/data/newusers/topEcharts.vue"
import TopTable from "@/components/home/data/user/topTable.vue"
import BottomEcharts from "@/components/home/data/newusers/bottomEcharts.vue"
import { get_users } from "@/request/api/data"
let time_value = ref("")
let inquire_value = ref("")
let list: any = ref({})
let params_init: any = {
  time: null,
  n: null
}
let init_echart = ref(true)
let data_echarts: any = ref([])
const get_data_use = async () => {
  let { data } = await get_users(params_init)
  data_echarts.value = [
    {
      name: "用户数量",
      num: data.user_num
    },
    {
      name: "使用频次",
      num: data.use_rate
    },
    {
      name: "VIP订单发布使用频次",
      num: data.vip_order_rate
    },
    {
      name: "普通订单发布使用频次",
      num: data.order_rate
    },
    {
      name: "名片",
      num: data.name_rate
    },

  ]
  list.value = data
}
const find_data = () => {
  params_init.n = inquire_value.value
  get_data_use()
}
const change = async(val: any) => {
  console.log(val, "valvalvalval");
  init_echart.value = false
  params_init.time = val
  await get_data_use()
  init_echart.value = true
}

onMounted(() => {
  get_data_use()
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;

  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;
    background: rgba(#FFF, 1);
    width: calc(100vw - 200px);

    .top_content {
      display: flex;
      justify-content: space-between;

      .left_top_content {
        h3 {
          margin: 10px 0 20px;
          color: #1f2f3d;
          font-weight: 400;
          font-size: 22px;

          span {
            @include font(#666666, 14, 32);
            font-weight: 400;
            margin-left: 20px;
          }
        }
      }
    }

    .top_echarts {
      border: 1px solid #ebebeb;
      margin-top: 20px;
      border-radius: 3px;
      transition: 0.2s;
      height: 500px;
    }

    .inquire {
      display: flex;
      align-items: center;
      justify-content: right;
      margin: 20px;

      .input {
        width: 140px;
      }

      .inquire_button {
        margin-left: 10px;
      }
    }

    .top_table {
      margin-top: 10px;
    }
  }
}

:deep(.el-input--large) {
  height: 32px;
}

:deep(.el-button) {
  height: 32px;
}
</style>